<template>
    <div class="register">
        <!-- <el-form>
            <el-form-item>
                <el-input></el-input>
            </el-form-item>
        </el-form> -->
        
        <van-form class="regForm" ref="regForm" @submit="submitHandler">
            <van-cell-group inset>
                <van-field v-model="loginParams.loginname" type="text" name="手机号" label="手机号" placeholder="手机号"
                    :rules="telRules" />
                <van-field v-model="loginParams.password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-row class="footer">
                    <van-button type="primary" size="small" native-type="submit">登录</van-button>
                    <van-button type="primary" size="small">重置</van-button>
                </van-row>
            </van-cell-group>
        </van-form>
    </div>
</template>

<script setup lang="ts">
    // 在.vue文件中按需引入声明文件
    import type { Ref } from 'vue';
    
    import { ref,reactive } from 'vue';
    import {doLoginAPI} from "@/api/user"
    import { showSuccessToast, showFailToast } from 'vant';
    import { useRouter } from 'vue-router';

    import {useUserStore} from "@/stores/user"

    defineOptions({
        name: "RegisterView",
    });

    let User = useUserStore();
    console.log(1111,User);
    
    let router= useRouter();
    let loginParams = reactive({
        loginname:"",
        password:"",
    });

    let regForm:Ref = ref();


    let telRules = ref([
        { required: true, message: '请填写手机号' },
        {pattern:/^1[3-9]\d{9}$/,message:"请输入正确的手机号"},
    ])


    let submitHandler = async ()=>{
        console.log("点击提交");

        try{
            await regForm.value.validate();  // 点击注册 表单校验 
            
            var res =  await User.loginAndUpdateUserInfo(loginParams);
            console.log("登录成功",res);
            // router.push("/");
            
        }catch(err:any){
            showFailToast(err.message);
        }
        
    }

</script>

<style scoped>
    .register{
        width: 100%;
        height: 100%;
        background-color: #f7f8fa;
        position: relative;
    }
    .regForm{
        width: 90%;
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translateX(-50%);
    }
    .footer{
        display: flex;
        justify-content: space-evenly;
        margin-top: 0.2rem;
    }
</style>